<template>
  <div style="display: flex">
    <div class="type">
      <el-tabs type="border-card" class="demo-tabs">
        <el-tab-pane label="结账" name="0">
          <div class="room">
            <el-scrollbar>
              <div class="room-list">
                <el-table :data="data.tableData" style="width: 100%">
                  <el-table-column prop="PName" label="商品名称" />
                  <el-table-column prop="PPrice" label="单价" />
                  <el-table-column prop="count" label="数量">
                    <template #default="scope">
                      <el-tag @click="update_Orders_je(scope.row)">-</el-tag>
                      <label style="margin: 0 8px 0 8px">{{ scope.row.count }}</label>
                      <el-tag @click="update_Orders_ja(scope.row)">+</el-tag>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-scrollbar>
            <div class="countzj">
              <div>数量：{{ data.countjz }}</div>
              <div style="margin-left: 30px">总价：￥{{ data.zj }}元</div>
            </div>
            <div style="border: 1px solid #ddd; margin: 24px 8px 16px 8px"></div>
            <div style="width: 100%">
              <div style="float: right">
                <el-button :disabled="data.tableData.length == 0" @click="qinc" type="danger"
                  >清除</el-button
                >
                <el-button :disabled="data.tableData.length == 0" @click="resolution" type="success"
                  >结账</el-button
                >
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="hasu">
      <div class="hasu-rmsp">
        <div style="padding: 12px; border: #ddd solid 1px">热门商品</div>
        <div style="display: flex">
          <div v-for="b in data.productsrmdata" class="hasu-text" :key="b">
            <div>
              <img
                style="width: 90%; height: 100%"
                src="https://ts1.tc.mm.bing.net/th/id/R-C.cb38805cb2326b97b21d3ae5cc65c5ca?rik=jm5aEOZEL5Bw0Q&riu=http%3a%2f%2fcbu01.alicdn.com%2fimg%2fibank%2f2016%2f647%2f266%2f3407662746_1673869671.jpg&ehk=MO%2fNU0f7iLVSS83EDAH3jhCPf7MmGYHK1MRYYOLFHHU%3d&risl=&pid=ImgRaw&r=0"
              />
            </div>
            <div>
              <div style="margin-top: 8px">
                {{ b.PName }}
              </div>
              <div style="height: 26px; color: red">￥{{ b.PPrice }}</div>
              <div style="height: 30px; color: #ddd; font-size: 12px">
                库存:{{ b.PStockQuantity }}
              </div>
              <div style="display: flex; margin-left: 40px">
                <el-button size="small" @click="addzjq(b)" type="danger">添加</el-button>
              </div>
              <div style="position: relative; top: -25px; left: 8px">0</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <el-tabs v-model="datas.initName" type="border-card" class="demo-tabs">
          <el-tab-pane
            v-loading="data.loadings"
            v-for="(p, index) in data.productsdata.filter((d) => d.categ != 'sys_vip_packages')"
            :label="getTypeName(p.categ)"
            :name="index"
            :key="p"
          >
            <div style="height: 349px">
              <el-scrollbar>
                <div class="spino">
                  <div v-for="d in p.categlist" class="spino-text" :key="d">
                    <div>
                      <img
                        style="width: 100%; height: 70%"
                        src="http://localhost:2303/Images/CarShop/Certificate/54935d18b94b4f55a192e1cbf72394ba.png"
                      />
                    </div>
                    <div class="spino-name">{{ d.PName }}</div>
                    <div class="spino-jg">￥{{ d.PPrice }}</div>
                    <div class="spino-ch">存货:{{ d.PStockQuantity }}</div>
                    <div class="spino-add">
                      <el-button @click="addzjq(d)" type="danger">添加</el-button>
                    </div>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog
      v-model="data.dialogTableVisible"
      :destroy-on-close="true"
      title="订单详情"
      width="900px"
    >
      <offlinejz
        :data="data.ooid"
        @myclose="
          () => {
            qinc();
            data.dialogTableVisible = false;
          }
        "
      />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import offlinejz from "@/components/offlinejz.vue";
import { pc_sys_products, pc_sys_productsrm } from "@/api/order";
import { add_jz_primary } from "@/api/offline";

const data = reactive({
  dialogTableVisible: false,
  isOpen: false,
  loadings: false,
  productsdata: [],
  productsrmdata: [],
  tableData: [],
  zj: 0,
  countjz: 0,
  ooid: "",
});

//结账
const resolution = async () => {
  const res = await add_jz_primary({
    dto: data.tableData,
    countjz: data.countjz,
    jz: data.zj,
  });
  if (res.code === 0) {
    data.ooid = res.data;

    data.dialogTableVisible = true;
  }
};

//选择产品
const addzjq = (val: any) => {
  let p = data.tableData.find((d) => d.PId == val.PId);
  if (p != undefined) {
    //如果该产品已存在则数量累加
    p.count++;
    data.zj += p.PPrice;
    conjz();
    return;
  }
  data.tableData.push({ ...val, count: 1 });
  data.zj += val.PPrice;
  conjz();
};

const datas = reactive({
  page: 1,
  limit: 6,
  total: 0,
  initName: 0,
});

//清除
const qinc = () => {
  data.tableData.forEach((d) => {
    data.tableData = data.tableData.filter((e) => e.PId != d.PId);
  });
  data.zj = 0;
  data.countjz = 0;
};

//产品+
const update_Orders_ja = (d: any) => {
  d.count++;
  if (d.count > 10) {
    //d.PStockQuantity
    alert("超出库存");
    return;
  }
  data.zj = data.zj + d.PPrice;
  conjz();
};
//产品-
const update_Orders_je = (d: any) => {
  d.count--;
  if (d.count == 0) {
    data.zj = data.zj - d.PPrice;
    data.tableData = data.tableData.filter((e) => e.PId != d.PId);
    conjz();
    return;
  }
  data.zj = data.zj - d.PPrice;
  conjz();
};

//数量
const conjz = () => {
  let o = 0;
  data.tableData.forEach((d) => {
    o += d.count;
  });
  data.countjz = o;
};

const getTypeName = (name: string) => {
  switch (name) {
    case "sys_car_supplies":
      return "汽车用品";
    case "car_services":
      return "汽车服务";
    case "sys_vip_packages":
      return "会员套餐";
  }
};

//获取商品数据
const bind = async () => {
  data.loadings = true;
  const res = await pc_sys_products();
  if (res.code === 0) {
    data.productsdata = res.data;
  }
  const ress = await pc_sys_productsrm();
  if (ress.code === 0) {
    data.productsrmdata = ress.data;
  }
  data.loadings = false;
};

onMounted(() => {
  bind();
});
</script>

<style scoped>
.room {
  width: 100%;
  height: 480px;
}

.type {
  width: 460px;
  height: 620px;
}

.room-list {
  width: 100%;
  height: 470px;
}

.countzj {
  display: flex;
  margin: 16px;
  padding-left: 100px;
}

.hasu {
  width: 820px;
  height: 660px;
  margin-left: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.hasu-rmsp {
  width: 100%;
  height: 200px;
  background-color: aliceblue;
}

.hasu-text {
  margin: 12px 0 12px 18px;
  width: 250px;
  height: 124px;
  display: flex;
  background-color: #fff;
}

.spino {
  width: 100%;
  height: 330px;
  display: flex;
}

.pagination {
  margin-top: 8px;
}

.spino-text {
  width: calc(30% - 8px);
  height: 99%;
  border: #ddd 1px solid;
  margin: 4px;
  flex-shrink: 0;
}

.spino-name {
  width: 100%;
  height: 24px;
  text-align: center;
}

.spino-jg {
  width: 100%;
  height: 40px;
  color: red;
  text-align: center;
}

.spino-ch {
  width: 100%;
  height: 40px;
  color: rgb(243, 186, 73);
  text-align: center;
}

.spino-add {
  width: 100%;
  height: 30px;
  text-align: center;
}

.spino-add2 {
  width: 100%;
  height: 30px;
  display: flex;
  margin-left: 76px;
}

.log {
  background-color: #99c9db;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  text-align: center;
  color: #fff;
}
</style>
